/**
 * jQuery json-viewer
 * @author: Alexandre Bodelot <alexandre.bodelot@gmail.com>
 * @link: https://github.com/abodelot/jquery.json-viewer
 */
(function($) {

	/**
	 * Check if arg is either an array with at least 1 element, or a dict with at least 1 key
	 * @return boolean
	 */
	function isCollapsable(arg) {
		return arg instanceof Object && Object.keys(arg).length > 0;
	}

	/**
	 * Check if a string represents a valid url
	 * @return boolean
	 */
	function isUrl(string) {
		var urlRegexp = /^(https?:\/\/|ftps?:\/\/)?([a-z0-9%-]+\.){1,}([a-z0-9-]+)?(:(\d{1,5}))?(\/([a-z0-9\-._~:/?#[\]@!$&'()*+,;=%]+)?)?$/i;
		return urlRegexp.test(string);
	}

	/**
	 * Transform a json object into html representation
	 * @return string
	 */
	function json2html(json, options) {
		var html = '';
		if (typeof json === 'string') {
			// Escape tags and quotes
			json = json
				.replace(/&/g, '&amp;')
				.replace(/</g, '&lt;')
				.replace(/>/g, '&gt;')
				.replace(/'/g, '&apos;')
				.replace(/"/g, '&quot;');

			if (options.withLinks && isUrl(json)) {
				html += '<a href="' + json + '" class="json-string" target="_blank">' + json + '</a>';
			} else {
				// Escape double quotes in the rendered non-URL string.
				json = json.replace(/&quot;/g, '\\&quot;');
				html += '<span class="json-string">"' + json + '"</span>';
			}
		} else if (typeof json === 'number') {
			html += '<span class="json-literal">' + json + '</span>';
		} else if (typeof json === 'boolean') {
			html += '<span class="json-literal">' + json + '</span>';
		} else if (json === null) {
			html += '<span class="json-literal">null</span>';
		} else if (json instanceof Array) {
			if (json.length > 0) {
				html += '[<ol class="json-array">';
				for (var i = 0; i < json.length; ++i) {
					html += '<li>';
					// Add toggle button if item is collapsable
					if (isCollapsable(json[i])) {
						html += '<a href class="json-toggle"></a>';
					}
					html += json2html(json[i], options);
					// Add comma if item is not last
					if (i < json.length - 1) {
						html += ',';
					}
					html += '</li>';
				}
				html += '</ol>]';
			} else {
				html += '[]';
			}
		} else if (typeof json === 'object') {
			var keyCount = Object.keys(json).length;
			if (keyCount > 0) {
				html += '{<ul class="json-dict">';
				for (var key in json) {
					if (Object.prototype.hasOwnProperty.call(json, key)) {
						html += '<li>';
						var keyRepr = options.withQuotes ?
							'<span class="json-string">"' + key + '"</span>' : key;
						// Add toggle button if item is collapsable
						if (isCollapsable(json[key])) {
							html += '<a href class="json-toggle">' + keyRepr + '</a>';
						} else {
							html += keyRepr;
						}
						html += ': ' + json2html(json[key], options);
						// Add comma if item is not last
						if (--keyCount > 0) {
							html += ',';
						}
						html += '</li>';
					}
				}
				html += '</ul>}';
			} else {
				html += '{}';
			}
		}
		return html;
	}

	/**
	 * jQuery plugin method
	 * @param json: a javascript object
	 * @param options: an optional options hash
	 */
	$.fn.jsonViewer = function(json, options) {
		// Merge user options with default options
		options = Object.assign({}, {
			collapsed: false,
			rootCollapsable: true,
			withQuotes: false,
			withLinks: true
		}, options);

		// jQuery chaining
		return this.each(function() {

			// Transform to HTML
			var html = json2html(json, options);
			if (options.rootCollapsable && isCollapsable(json)) {
				html = '<a href class="json-toggle"></a>' + html;
			}

			// Insert HTML in target DOM element
			$(this).html(html);
			$(this).addClass('json-document');

			// Bind click on toggle buttons
			$(this).off('click');
			$(this).on('click', 'a.json-toggle', function() {
				var target = $(this).toggleClass('collapsed').siblings('ul.json-dict, ol.json-array');
				target.toggle();
				if (target.is(':visible')) {
					target.siblings('.json-placeholder').remove();
				} else {
					var count = target.children('li').length;
					var placeholder = count + (count > 1 ? ' items' : ' item');
					target.after('<a href class="json-placeholder">' + placeholder + '</a>');
				}
				return false;
			});

			// Simulate click on toggle button when placeholder is clicked
			$(this).on('click', 'a.json-placeholder', function() {
				$(this).siblings('a.json-toggle').click();
				return false;
			});

			if (options.collapsed == true) {
				// Trigger click to collapse all nodes
				$(this).find('a.json-toggle').click();
			}
		});
	};
})(jQuery);